<script>
  import UniCol from '@/uni_modules/uni-row/components/uni-col/uni-col.vue';
  import sheep from '@/sheep';
  import GenealogyInfo from '@/pages/pc/components/genealogyInfo.vue';

  export default {
    name: 'genealogyPage',
    components: { GenealogyInfo, UniCol },
    data() {
      return {
        genealogyList: [],
        selectGenealogyIndex: 0,
        familyName: '',
        // 当前选中的家谱信息
        genealogyInfo: {},
      };
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
    },
    mounted() {
      this.getFamilyList();
    },
    methods: {
      // 获取家谱列表
      async getFamilyList() {
        const { data } = await sheep.$api.genealogy.getGenealogySelect();
        this.genealogyList = data.list;
      },
      // 选择家谱
      async selectGenealogy(index) {
        this.selectGenealogyIndex = index;
        // 当前选中的信息
        this.genealogyInfo = this.genealogyList[this.selectGenealogyIndex];
        await uni.showLoading({
          title: '加载中...',
          mask: true,
        });
        // await sheep.$store('family').setGenealogyTree(this.genealogyList[this.selectGenealogyIndex].id);
        await uni.hideLoading();
        await sheep.$router.go('/pages/genealogy/management', {
          id: this.genealogyList[this.selectGenealogyIndex].id,
          name: this.genealogyList[this.selectGenealogyIndex].title,
          add_time: this.genealogyList[this.selectGenealogyIndex].add_time,
          username: this.genealogyList[this.selectGenealogyIndex].initiator,
        });
      },
      // 新建家谱
      newFamilyTree() {
        this.$refs.familyMemberPopUp.openPopup({
          title: '',
          maskClick: false,
          confirm: async () => {
            if (!this.familyName) {
              uni.showToast({
                title: '请输入家庭名称',
                icon: 'none',
              });
              return;
            }
            const { code } = await sheep.$api.genealogy.addGenealogy({
              title: this.familyName,
              city: '',
            });
            if (code == 1) {
              await this.getFamilyList();
              this.$refs.familyMemberPopUp.closePopup();
              uni.showToast({
                title: '创建成功',
                icon: 'none',
              });
            }
          },
        });
      },
    },
  };
</script>

<template>
  <uni-row style="width: 100%;height: 100%;" class="flex flex-column flex-sub">
    <uni-col :span="24"
             style="width: 100%;border-radius: 8px;"
             class="bg_FFFFFF flex flex-column flex-sub"
    >
      <view style="width: 100%;"
            class="flex align-center justify-between "
      >
        <view style="width: 100%;padding: 10px 0;border-bottom: 1px solid #E8E8E8"
              class="flex align-center justify-between">
          <view class="flex align-end" style="margin-left: 20px;">
            <view class="flex align-center">
              <view style="width: 4px;height: 18px;border-radius: 7px;background: #FF440A"></view>
              <view style="font-size: 28px;color: #363636;margin-left: 5px;white-space: nowrap" class="fw_500">
                家谱列表
              </view>
            </view>
          </view>
          <view
            style="width: 85px;height: 30px;background: #FFFFFF;border-radius: 15px 15px 15px 15px;border: 1px solid #BCBCBC;padding: 4px 10px;margin-right: 20px;cursor:pointer;"
            class="flex align-center justify-center"
            @click.stop="newFamilyTree"
          >
            <image :src="`${IMG_URL}/index/pc_familyCulture_add.png`" style="width: 15px;height: 15px;"></image>
            <view style="margin-left: 5px;font-size: 11px;font-weight: 500;color: #363636;">新建家谱</view>
          </view>
        </view>
      </view>
      <view class="flex-sub" style="position: relative;width: 100%;">
        <scroll-view scroll-y="true" style="position: absolute;top: 0;left: 50%;width: 98%;height: 100%;transform: translateX(-50%)">
          <view class="flex align-center" style="width: 98%;white-space: nowrap;padding: 10px 0;flex-wrap: wrap">
            <view v-for="(item, index) in genealogyList"
                  :key="index"
                  style="width: 720rpx;height: 142px;border-radius: 16rpx;border: 4rpx solid #EDEDED;display: inline-block;margin-right: 10px;cursor:pointer;padding: 0 8px"
                  class="mt_20"
                  @click.stop="selectGenealogy(index)"
            >
<!--              :style="{-->
<!--              border: index === selectGenealogyIndex ? '2px solid #4887FF' : '2px solid #EDEDED',-->
<!--              }"-->
              <view style="width: 100%;height: 100%;" class="flex align-center">
                <image :src="`${IMG_URL}/index/genealogicalShowIcon.png`" style="width: 250rpx;height: 200rpx;"></image>
                <view class="flex-sub" style="margin-left: 15px;">
                  <view style="font-size: 24px;color: #6C6C6C;font-weight: bold;">{{ item.title }}</view>
                  <view style="font-weight: 400;font-size: 18px;color: #6C6C6C;margin-top: 10px;">家谱号：{{ item.code }}
                  </view>
                  <view class="flex align-center"
                        style="font-weight: 400;font-size: 18px;color: #6C6C6C;margin-top: 10px;">
                    <view>发起人: {{ item.initiator }}</view>
                    <view style="margin-right: 10px;margin-left: 20px;">人数: {{ item.total_count }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-col>
<!--    <uni-col :span="24" class="flex-sub flex flex-column"-->
<!--             style="background: #FFFFFF;margin-top: 10px;border-radius: 9px;overflow: hidden">-->
<!--      <genealogy-info :id="genealogyList[selectGenealogyIndex].id" :info="genealogyInfo"></genealogy-info>-->
<!--    </uni-col>-->

    <s-first-popup ref="familyMemberPopUp" @closePopup="nameBoxClose">
      <template #content>
        <view class="familyMemberPopUp flex flex-column align-center">
          <view class="familyMemberPopUp_title mt_45">
            <view class="familyMemberPopUp_title_name">
              新建家谱
            </view>
          </view>
          <image class="familyMemberPopUp_icon z_1" :src="`${IMG_URL}/index/add_icon.png`"></image>
          <view class="familyMemberPopUp_editInfo flex align-center justify-between mt_64">
            <input type="text" v-model="familyName"
                   placeholder="请输入家谱名称"
                   placeholder-class="familyMemberPopUp_editInfo_placeholder"
            >
          </view>
        </view>
      </template>
    </s-first-popup>
  </uni-row>
</template>

<style scoped lang="scss">
  .familyMemberPopUp_icon {
    width: 147rpx;
    height: 147rpx;
    position: absolute;
    top: 0;
    right: 0;
  }

  .familyMemberPopUp_title {
    width: 454rpx;

    .familyMemberPopUp_title_name {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 48rpx;
      color: #292929;

    }

    .familyMemberPopUp_title_detail {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #9F9F9F;
    }
  }

  .familyMemberPopUp_editInfo {
    padding: 10px 15px;
    background: #F5F5F5;
    border-radius: 20px;
    text-align: center;
  }
</style>